<template>
    <div class="ad-left">
        <!-- <div class="header">
            <i class="iconfont">&#xe615;</i>场外交易
        </div> -->
        <ul class="left-nav-list">
            <router-link tag='li' to='/buy-bitcoin' exact>我要買入</router-link>
            <router-link tag='li' to='/sell-bitcoin' exact>我要出售</router-link>
            <router-link tag='li' to='/exchange' exact>我要兌換</router-link>
            <!-- <router-link tag='li' to='/grift-card-trade' exact>礼品卡交易</router-link> -->
        </ul>
        <ul class="left-nav-list">
            <router-link tag='li' to='/new-ad' exact >發佈廣告</router-link>
        </ul>
        <ul class="left-nav-list">
            <router-link tag='li' to='/my-order' exact>我的訂單</router-link>
            <router-link tag='li' to='/my-ads' exact>我的廣告</router-link>
            <router-link tag='li' to='/trust-manage' exact>信任管理</router-link>
        </ul>
    </div>
</template>

<script>
    export default {
        data() {
            return {
               
            };
        },
    }
</script>
<style lang="less" scoped>
    @import url('../assets/css/_b.less');
    //小屏
    @media screen and (max-width : 670px) {

    }
    //大屏
    @media screen and (min-width : 670px) {
        .ad-left {
            width: 190px;
            margin-right: 22px;
            .header {
                box-shadow: rgba(225, 234, 240, 0.8) 0px 4px 8px 0px;
                background-image: linear-gradient(to left, rgb(68, 189, 255), rgb(0, 128, 255));
                display: flex;
                -webkit-box-pack: center;
                justify-content: center;
                -webkit-box-align: center;
                align-items: center;
                height: 50px;
                border-radius: 2px;
                color: #fff;
            }
            .left-nav-list {
                margin-top: 15px;
                background: #fff;
                box-shadow: rgba(225, 234, 240, 0.8) 0px 4px 8px 0px;
                border-radius: 2px;
                li {
                    padding: 20px 0;
                    font-size: 15px;
                    text-align: center;
                    
                    border-top: 1px solid @borderColor;
                    cursor: pointer;
                    &:hover {
                        color: @mainColor;
                        background-color: rgba(225,240,255)
                    }
                    
                }
            }
            .router-link-exact-active {
                border-left: 4px solid @mainColor;
                background-color: rgba(225,240,255)
            }
        }
    }
</style>